<template>
	<view class="index">
		<view>
			<!-- 待赠送 -->
			<view class="all">
				
			</view>
			<view class="showactiveLevel" >
				<view v-if="list.length<1" style="height: 70vh;overflow: hidden;">
					<NoData></NoData>
				</view>
				<view class="" v-else>
					<view class="itemListBox" >
						<view class="tip">
							请选择确认赠送好友
						</view>
						<view class="itemList" :class="listStyle">
							<view v-for="(items, i) in list" style="" :key="i"
								class="item daditem" style="margin-top: 20rpx;" >
								<view class="img">
									<img :src="items.detailImages" alt="" />
								</view>
								<view class="datas" style="justify-content: space-around;">
									<p><b>用户名：</b>{{ items.name }}</p>
									<p class="price"><b>用户id：</b>{{ items.userIdd }}</p>
									<view class="right_btn_group">
										<span class="u-btn u-primary-btn" v-if="items.status == 2" @click="confirmGift(items)">赠送给Ta</span>
									</view>
									<!-- <p v-if="items.status == 0"><b>赠送状态：</b>待赠送</p> -->
									<p v-if="items.status == 1"><b>赠送状态：</b>已赠送</p>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		selectGiftInfo,disposeCompliment
	} from "@/api/myBox.js";
	import {
		$getStorage,
		$setStorage
	} from "@/utils/auth.js";
	import NoData from "@/components/NoData/NoData"
	export default {
		data() {
			return {
				list:[],
				key:"",
			}
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo
			},
			selectedItemCount() {
				return this.selectedItems.length;
			},
			// 切换样式
			listStyle() {
				return this.isListStyle ? 'colStyle' : '';
			}
		},
		onLoad(e) {
			this.key = e.key
		},
		onShow() {
			this.init()
		},
		onUnload() {
			
		},
		methods: {
			init(){
				let data = {
					key:this.key
				}
				selectGiftInfo(data).then(res =>{
					if(res.code == 200){
						this.list = res.data
					}else{
						this.list = []
					}
				}) 
			},
			// 确认赠送
			confirmGift(item){
				let _this = this
				uni.showModal({
					title: '温馨提示',
					content: '您确定要赠送给Ta吗？',
					success: function(res) {
						if (res.confirm) {
							disposeCompliment({
								key: _this.key,
								id: item.id,
								choose: 1
							}).then(res => {
								if (res.code == 200) {
									_this.init();
								}
							})
						} 
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #151515;
	}

	.index {
		height: 100vh;
		// overflow: hidden;
	}

	.uni-collapse-item__title.uni-collapse-item-border,
	.uni-collapse-item {
		background-color: rgb(108, 67, 255);
		color: #fff;
	}

	.rules {
		width: 130rpx;
		height: 70rpx;
		background-image: url(../../static/fontSize.png);
		background-size: 100%;
		background-repeat: no-repeat;
		position: fixed;
		right: 0;
		top: 400rpx;
		text-align: center;
		line-height: 70rpx;
		border-radius: 40rpx 0 0 40rpx;
		font-size: 25rpx;
	}

	.comrules {
		width: 130rpx;
		height: 70rpx;
		background-image: url(../../static/fontSize.png);
		background-size: 100%;
		background-repeat: no-repeat;
		position: fixed;
		right: 0;
		top: 500rpx;
		text-align: center;
		line-height: 70rpx;
		border-radius: 40rpx 0 0 40rpx;
		font-size: 25rpx;
	}

	.markDown {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		/* 半透明黑色遮罩层 */
		z-index: 998;
		/* 比弹框的z-index小 */
	}

	// 一番赏弹框样式
	.PriceByyfs {
		position: fixed;
		width: 80%;
		height: 500rpx;
		background-color: #fff;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;
		text-align: center;
		padding: 20rpx;
		border-radius: 20rpx;

		.sku-money {
			font-size: 34rpx;
			margin: 30rpx 0;
		}

		.yfs-skuList {
			height: 200rpx;
			overflow-y: auto;
			.sale-yfs {
				display: flex;
				height: 150rpx;
				align-items: center;
				margin: 20rpx 20rpx;

				.yfsImg {
					width: 150rpx;
					height: 150rpx;
					border-radius: 15rpx;
					margin-right: 20rpx;
				}

				.sku-yfs {
					height: 150rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-start;
				}

			}
		}



		.warnyfs {
			text-align: left;
			font-size: 25rpx;
			margin-left: 20rpx;
			color: gray;
		}

		.sku-btn {
			display: flex;
			align-items: center;
			margin-top: 40rpx;

			button {
				width: 180rpx;
				height: 80rpx;
				font-size: 25rpx;
				line-height: 80rpx;

			}

			.btn_01 {
				background-color: rgb(108, 67, 255);
				color: #fff;
			}
		}

	}

	// 转让弹框

	.PriceBySku {
		position: fixed;
		width: 70%;
		height: 300rpx;
		background-color: #fff;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;
		text-align: center;
		padding: 20rpx;
		border-radius: 20rpx;

		.sku-money {
			font-size: 34rpx;
			margin: 30rpx 0;
		}

		.sale-sku {
			display: flex;
			height: 80rpx;
			align-items: center;
			margin: 20rpx 20rpx;

			.sku-input {
				width: 60%;
				height: 80rpx;
				background-color: rgb(238, 238, 238);
			}

		}

		.sku-btn {
			display: flex;
			align-items: center;
			margin-top: 40rpx;

			button {
				width: 180rpx;
				height: 80rpx;
				font-size: 25rpx;
				line-height: 80rpx;

			}

			.btn_01 {
				background-color: rgb(108, 67, 255);
				color: #fff;
			}
		}

	}

	// 搜索样式
	.dropdown {
		height: 400rpx;
		width: 100%;
		padding-top: 20px;
		padding-bottom: 20px;
		/* position: fixed; */
		position: absolute !important;
		/* 将 fixed 改为 absolute */

		/* 修改这里 */
		/* top: 100%; */
		bottom: 0;
		display: block;
		/* 添加这一行 */
		/* width: 100%; */
		background-color: #fff !important;
		border: 1px solid #5d4748;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		// box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		z-index: 999;
		display: flex;
		flex-direction: column;
	}

	.dropdown-sift {
		margin: 0 auto;
		font-size: 40rpx;
		font-weight: 900;
		padding-bottom: 20rpx;
		color: #000;
	}

	.dropdown-time {
		font-weight: 100;
		margin-left: 20px;
		margin-bottom: 20rpx;
		font-size: 38rpx;
		color: #fff;
	}

	.time-options {
		width: 100%;
		padding-top: 10px;
		padding-bottom: 10px;
		display: flex;
		justify-content: space-evenly;
	}

	.data {
		border: 5rpx solid rgb(108, 67, 255);
		color: #fff;
		font-weight: 100;
		height: 100rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		padding: 0 30rpx;

		input {
			font-size: 35rpx;
			color: #fff;
		}
	}

	.time-range {
		height: 80rpx;
		padding: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.button-container {
		width: 90%;
		border-radius: 50rpx;
		margin: auto;
		display: flex;
		justify-content: space-between;
	}

	.reset-button {
		width: 50%;
		height: 80rpx;
		color: #fff;
		border-radius: 50rpx 0 0 50rpx;
		background: rgb(108, 67, 255);

		text {
			line-height: 80rpx;
			font-size: 38rpx;
		}
	}

	.confirm-button {
		width: 50%;
		height: 80rpx;
		color: #fff;
		border-radius: 0 50rpx 50rpx 0;
		background: rgb(108, 67, 255);

		text {
			line-height: 80rpx;
			font-size: 38rpx;
		}
	}

	.header {
		width: 100%;
		height: 130rpx;
		border-bottom: 1rpx solid #5d4748;
		display: flex;
		align-items: center;
		// justify-content: space-around;
		box-sizing: border-box;

		.nav-content-right {
			width: 60rpx;
			height: 60rpx;
			padding: 0 10px;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.search-input-wrapper {
			height: 90rpx;
			// border-radius: 50rpx;
			width: 500rpx;
			flex: 1;
			background-color: #fff;
			padding: 0 30rpx;
			font-weight: 100;
			display: flex;
			align-items: center;
			position: relative;
			border-radius: 15rpx;

			.icon-search {
				margin-right: 10rpx;
				color: #000;
				z-index: 999;
			}

			input {
				background-color: transparent;
				padding: 0;
				height: 90%;
				line-height: 70rpx;
				color: #000;
			}

			.search-btn {
				width: 130rpx;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 32rpx;
				position: absolute;
				right: 5%;
				color: #fff;
				background: rgb(108, 67, 255);
			}
		}

		.filter-container {
			position: relative;
			z-index: 999;
		}

		.filter-header {
			display: flex;
			align-items: center;
			cursor: pointer;
		}

		p {
			color: #adafc1;
			font-weight: 900;
			font-size: 33rpx;
		}

		.active {
			background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	.level {
		margin-top: 30rpx;
		display: flex;
		width: 100%;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 10rpx;
		overflow-x: auto;

		view {
			flex-shrink: 0;
			margin-right: 10rpx;
			color: rgb(255, 255, 255);
			width: 110rpx;
			height: 70rpx;
			line-height: 70rpx;
			font-weight: 100;
			font-size: 24rpx;
			text-align: center;
			border-radius: 5rpx;
			background: url(../../static/selecticon.png) center/ contain no-repeat;
		}

		.active {
			color: rgb(255, 255, 255);
			background: url(../../static/btnicon.png) center/ contain no-repeat;
		}
	}

	.all {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
		align-items: center;
		box-sizing: border-box;
		padding: 0 20rpx;

		.check {
			display: flex;
			color: rgb(255, 255, 255);
			font-weight: 100;
			align-items: center;

			text {
				margin-left: 10rpx;
			}
		}

		.right {
			color: rgb(255, 255, 255);
			background: rgb(108, 67, 255);
			width: 180rpx;
			height: 70rpx;
			line-height: 70rpx;
			font-weight: 100;
			font-size: 28rpx;
			text-align: center;
			border-radius: 15rpx;
		}
	}

	.itemListBox {
		width: 100%;
		max-height: 1000rpx;
		overflow: scroll;

		.tabList {
			width: 200rpx;
			color: white;
			display: flex;
			height: 50rpx;
			font-size: 30rpx;
			padding: 0 20rpx;
			margin: 0 30rpx 20rpx 0;
			justify-content: space-between;

			.active {
				color: rgb(108, 67, 255);
			}
		}

		.itemList {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;

			.daditem {
				margin-bottom: 30rpx;
				background: url(../../static/boxCard.png) center/ cover no-repeat;
				border: 2rpx solid rgb(108, 67, 255);
				box-sizing: border-box;
			}

			.unitem {
				background: #1a1724;
			}

			.item {
				width: 100%;
				border-radius: 5rpx;
				height: 200rpx;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 0 20rpx;

				.check {
					transform: scale(0.8);
				}

				.img {
					width: 150rpx;
					height: 150rpx;
					// margin-left: 20rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					overflow: hidden;
					background-image: -webkit-linear-gradient(-45deg, rgb(91, 184, 152), rgb(227, 240, 239), rgb(91, 184, 152));
					display: flex;
					align-items: center;
					justify-content: center;

					img {
						width: 140rpx;
						height: 140rpx;
						border-radius: 10rpx;
						background-color: #151515;
					}
				}

				.datas {
					flex: 1;
					color: #fff;
					margin-left: 20rpx;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					position: relative;
				}

				.lock {
					position: absolute;
					right: 30rpx;
					text-align: center;

					view {
						margin-top: 16rpx;
					}
				}
			}

			.uni-collapse {
				margin: 20rpx 0;
			}

			&.colStyle {
				::v-deep .uni-collapse-item__wrap-content::after {
					visibility: hidden;
					display: block;
					font-size: 0;
					content: " ";
					clear: both;
					height: 0;
				}

				.item {
					display: block;
					position: relative;
					width: calc(50% - 20rpx);
					float: left;
					height: auto;
					padding-bottom: 20rpx;
					border: 1px solid purple;
					box-sizing: border-box;
					margin: 10rpx;
					border-radius: 30rpx;
					overflow: hidden;
				}

				.check {
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					z-index: 2;
				}

				.img {
					width: 260rpx;
					height: 260rpx;
					margin: 0 auto;
					border-radius: 5rpx;

					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
						border-radius: 5rpx;
						background-color: #151515;
					}
				}

				.lock {
					position: absolute;
					top: 180rpx;
					right: 10rpx;
				}
			}
		}
	}

	.bottom {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 0 20rpx;
		margin-top: 30rpx;
		justify-content: space-between;
		position: fixed;
		bottom: 2%;

		.left,
		.middle,
		.right {
			color: #fff;
			background: url(../../static/btnicon.png) center/ contain no-repeat;
			width: 160rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-weight: 800;
			font-size: 28rpx;
			text-align: center;
			border-radius: 5rpx;
		}
	}

	.num {
		width: 100%;
		text-align: center;
		color: #fff;
		margin-top: 20rpx;
		position: fixed;
		bottom: 10%;
	}

	.pickerClass {
		color: #fff;
		background-color: #000;
		border-color: #6c43ff;
	}
	.popup_content{
		width: 600rpx;
		// height: 600rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.popop_head{
		display: flex;
		justify-content: end;
	}
	.popup_title{
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		color: #333;
	}
	.popup_details{
		padding: 20rpx;
		text-indent: 2em;
		text-align: center;
		font-size: 28rpx;
		color: #2d2d2d;
		line-height: 1.5em;
	}
	.popup_btnGroup{
		display: flex;
		height: 70rpx;
		overflow: hidden;
		line-height: 70rpx;
		margin-top: 20rpx;
		margin-bottom: 40rpx;
	}
	.u-btn{
		flex: 1;
		height: 100%;
		text-align: center;
		background-color: #efefef;
		color: #303030;
		border-radius: 8rpx;
	}
	.u-btn-danger{
		margin-left: 40rpx;
		background-color: #d9625e;
		color: #fff;
	}
	.popup_dangerTitle{
		color: #d9625e;
		font-size: 24rpx;
		margin-bottom: 20rpx;
	}
	.tip{
		font-size: 32rpx;
		height: 46rpx;
		line-height: 46rpx;
		color: #fff;
		padding: 0 20rpx;
	}
	.right_btn_group{
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		.u-primary-btn{
			background-color: #6c43ff;
			color: #fff;
			display: inline-block;
			height: 60rpx;
			line-height: 60rpx;
			padding: 0 20rpx;
		}
		}
</style>